<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<div class="layui-container">

    <div class="layui-card" style="width: 400px; margin: 150px auto;">
        <blockquote class="layui-elem-quote" style="font-weight: bolder;">DEPLOYMENT TOOL LOGIN</blockquote>

        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="login">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="layui/layui.js"></script>
<script>
    layui.use(['form'], function(){
        var form = layui.form;
        var $ = layui.$;
        // 监听提交事件
        form.on('submit(login)', function(data){
            // 在这里处理登录逻辑，例如发送Ajax请求到服务器
            console.log(data.field); // 打印表单的所有字段
            debugger;
            $.post("api/login",data.field,function (result) {
                if(result.success){

                    window.location.href = "index.html";
                } else {
                    // 登录失败，显示错误信息
                    layer.msg("登录失败！"+result.msg);
                }
            });

            return false; // 阻止表单默认提交事件
        });
    });
</script>
</body>
</html>